import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/exam/ExamQuestionIndexPage.dart';
import 'package:ichinesereader/exam/dto/assessment.response.dart';
import 'package:ichinesereader/utils/log.dart';

import 'PlaceController.dart';
import 'PlacePlayerWidget.dart';

// ignore: must_be_immutable
class PlaceStepThreeQuestion extends GetView<PlaceController> {
  PlaceStepThreeQuestion({Key? key, required this.questionStepBody})
      : super(key: key);
  final UiQuestionStepBody questionStepBody;
  Rx<String> radioGroupValue = ''.obs;
  @override
  Widget build(BuildContext context) {
    controller.saveAnswer = questionStepBody.item?.answer;
    return Obx(() {
      var head = questionStepBody.item?.head;
      String show = head?.show ?? '';
      String headText = head?.text ?? '';
      Log.debug('questionStepBody ${questionStepBody.item?.toJson()}');
      List<Widget> examQuestionContents = [];

      if (show.indexOf(QuestionContent.QUESTION_SHOW_TYPE_IMAGE) > -1) {
        examQuestionContents.add(Container(
            padding: const EdgeInsets.only(top: 10),
            width: (MediaQuery.of(context).size.width - 80) * 0.5 > 400
                ? 400
                : (MediaQuery.of(context).size.width - 80) * 0.5,
            child: Image.network(head?.image ?? '')));
        examQuestionContents.add(SizedBox(height: 15));
      }
      if (show.indexOf(QuestionContent.QUESTION_SHOW_TYPE_AUDIO) > -1) {
        examQuestionContents.add(PlacePlayerWidget(
            audioUrl: head?.audio ?? '', iconSize: 50, isShowLoading: false));
        examQuestionContents.add(SizedBox(height: 15));
      }
      if (show.indexOf(QuestionContent.QUESTION_SHOW_TYPE_TEXT) > -1) {
        examQuestionContents.add(Container(
          alignment: Alignment.center,
          child: HtmlWidget(headText.replaceAll('\n', '<br/>'),
              textStyle: TextStyle(
                  fontSize: 18,
                  color: (Get.isDarkMode ? Color(0xFF757575) : Colors.black87),
                  height: 1.8,
                  wordSpacing: 1.5)),
        ));
      }

      Log.debug('questionStepBody.item?.type= ${questionStepBody.item?.type}');
      if (questionStepBody.item?.type == QuestionItem.QUESTION_TYPE_OPTION) {
        examQuestionContents.add(_buildQuestionOption(questionStepBody.item));
      }

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: examQuestionContents,
      );
    });
  }

  Container _buildQuestionOption(QuestionItem? questionItem) {
    List<Widget> options = [];

    if (questionItem?.body != null && questionItem?.body?.first != null) {
      List<QuestionContent> questionBodyList = questionItem?.body?.first ?? [];
      for (var iQuestionBody = 0;
          iQuestionBody < questionBodyList.length;
          iQuestionBody++) {
        QuestionContent questionBody = questionBodyList[iQuestionBody];

        options.add(RadioListTile<String>(
            value: questionBody.baseValue ?? '',
            groupValue: radioGroupValue.value,
            onChanged: (Object? value) {
              Log.debug('onOptionChanged value=$value');
              radioGroupValue.value = value.toString();
              controller.saveAnswer?.clear();
              controller.saveAnswer?.add(radioGroupValue.value);
              if (controller.currentQuestionStepIndex.value ==
                  controller.questionStepList.length - 1) {
                controller.bottomBtnStatus.value = 4;
              } else {
                controller.bottomBtnStatus.value = 2;
              }
            },
            title: _buildOptionContent(questionBody),
            //右侧图标
            selected: radioGroupValue.value == questionBody.baseValue,
            contentPadding: const EdgeInsets.symmetric(horizontal: 0)));
      }
    }
    return Container(
      child: Column(
        children: options,
      ),
    );
  }

  Widget _buildOptionContent(QuestionContent body) {
    String show = body.show ?? '';
    List<Widget> examQuestionContents = [];
    if (show.contains(QuestionContent.QUESTION_SHOW_TYPE_TEXT)) {
      examQuestionContents.add(Text(body.text ?? ''));
    }
    if (show.contains(QuestionContent.QUESTION_SHOW_TYPE_IMAGE) &&
        body.image != null) {
      examQuestionContents.add(Container(
          padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
          height: 200,
          width: 200,
          child: Image.network(body.image ?? '')));
    }
    if (show.contains(QuestionContent.QUESTION_SHOW_TYPE_AUDIO)) {
      examQuestionContents.add(PlacePlayerWidget(
          audioUrl: body.audio ?? '', iconSize: 40, isShowLoading: false));
    }

    Widget examQuestion = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: examQuestionContents,
    );
    return examQuestion;
  }
}
